<template>
  <div class="yoyo-container mx-auto min-h-screen">
    <navBar :title="$t('mine.myCoupons')" />

    <div class="lg:mx-4 lg:w-[calc(100%-2rem)]">
      <!-- 状态筛选标签 -->
      <van-tabs v-model="activeTab" @click="onTabClick" sticky>
        <van-tab :title="$t('coupons.available')" name="1">
          <div class="mt-4 mx-4">
            <coupon-card v-for="coupon in coupons" :key="coupon.id" :coupon="coupon" status="available" @use="handleUseCoupon" />
            <div v-if="coupons.length === 0" class="text-center py-8">
              <van-empty :description="$t('coupons.noAvailable')" />
            </div>
          </div>
        </van-tab>

        <van-tab :title="$t('coupons.used')" name="2">
          <div class="mt-4 mx-4">
            <coupon-card v-for="coupon in coupons" :key="coupon.id" :coupon="coupon" status="used" />
            <div v-if="coupons.length === 0" class="text-center py-8">
              <van-empty :description="$t('coupons.noUsed')" />
            </div>
          </div>
        </van-tab>

        <van-tab :title="$t('coupons.expired')" name="3">
          <div class="mt-4 mx-4">
            <coupon-card v-for="coupon in coupons" :key="coupon.id" :coupon="coupon" status="expired" />
            <div v-if="coupons.length === 0" class="text-center py-8">
              <van-empty :description="$t('coupons.noExpired')" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tabs, Tab } from "vant"
import { getCouponList } from "@/apis/mine"
import CouponCard from "@/components/mine/CouponCard.vue"

export default {
  name: "MyCoupons",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    CouponCard,
  },
  data() {
    return {
      loading: false,
      activeTab: "1",
      coupons: [],
    }
  },
  computed: {

    // 可用优惠券
    availableCoupons() {
      return this.coupons.filter((coupon) => {
        const now = new Date()
        const endDate = new Date(coupon.validEndTime)
        return !coupon.useTime && endDate > now
      })
    },

    // 已使用优惠券
    usedCoupons() {
      return this.coupons.filter((coupon) => coupon.useTime)
    },

    // 已过期优惠券
    expiredCoupons() {
      return this.coupons.filter((coupon) => {
        const now = new Date()
        const endDate = new Date(coupon.validEndTime)
        return !coupon.useTime && endDate <= now
      })
    },
  },

  async created() {
    await this.fetchCoupons()
  },

  methods: {
    // 获取优惠券列表
    async fetchCoupons() {
      try {
        this.loading = true
        const params = {
          pageNo: 1,
          pageSize: 100,
          status: this.activeTab,
        }
        const response = await getCouponList(params)
        this.coupons = response.data?.list || []
      } catch (error) {
        console.error("获取优惠券列表失败:", error)
      } finally {
        this.loading = false
      }
    },

    // 标签切换
    onTabClick(name, title) {
      this.activeTab = name
      this.coupons = []
      this.fetchCoupons()
    },

    // 使用优惠券
    handleUseCoupon(coupon) {
      this.$toast("跳转到使用优惠券页面")
      // 这里可以跳转到商品页面或购物车页面
    },
  },
}
</script>

<style scoped>

/deep/ .van-nav-bar {
  background-color: #fff;
}

/deep/ .van-tabs__line {
  background-color: #ff6b35;
}

/deep/ .van-tab--active {
  color: #ff6b35;
}
</style>
